<template>
  <div class="dashboard-container">
    <div class="app-container">

      <!-- 放置搜索组件 -->

      <serach-text @handleSearch="handleSearch" />
      <!-- 共计多少条数据 -->
      <el-alert :title="'数据一共' + page.total + '条'" type="info" show-icon />

      <!-- tab切换 -->
      <el-tabs v-model="activeName" type="card" @tab-click="TabChange">
        <el-tab-pane label="全部" name="all" />
        <el-tab-pane label="待审核" name="0" />
        <el-tab-pane label="已审核" name="1" />
        <el-tab-pane label="已拒绝" name="2" />
      </el-tabs>

      <!-- 放置表格和分页 -->
      <el-card v-loading="loading">
        <el-table :data="list">
          <el-table-column label="目录" prop="catalog" />
          <el-table-column label="题型" prop="catalog" />
          <el-table-column label="题干" prop="question">
            <template slot-scope="{ row }">
              <span v-html="row.question" />
            </template>
          </el-table-column>
          <el-table-column label="录入时间" prop="addDate">
            <template slot-scope="{ row }">{{
              row.addDate | formatDate
            }}</template>
          </el-table-column>
          <el-table-column label="难度" prop="catalog" />
          <el-table-column label="录入人" prop="creator" />
          <el-table-column label="审核状态" prop="chkState">
            <template slot-scope="{ row }">

              <span
                v-if="row.chkState === 0"
                class="ReviewStatus wait"
              >待审核</span>
              <span
                v-if="row.chkState === 1"
                class="ReviewStatus pass"
              >已通过</span>
              <span
                v-if="row.chkState === 2"
                class="ReviewStatus refuse"
              >拒绝</span>

            </template>
          </el-table-column>
          <el-table-column label="审核意见" prop="chkRemarks" />
          <el-table-column label="审核人" prop="chkUser" />
          <el-table-column label="发布状态">
            <template slot-scope="{row}">
              <span v-if="row.publishState === 1">已发布</span>
              <span v-else-if="row.chkState === 1">已下架</span>
              <span v-else>待发布</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="100">
            <template slot-scope="{ row }">
              <el-button
                type="text"
                size="small"
                @click="showPreview(row.id)"
              >预览</el-button>
              <el-button
                type="text"
                size="small"
                @click="check(row.id)"
              >审核</el-button>
              <el-button
                type="text"
                size="small"
                @click="
                  $router.push({
                    name: 'step-form',
                    path: '/questions/new',
                    query: {
                      id: row.id,
                    },
                  })
                "
              >修改</el-button>
              <el-button
                type="text"
                size="small"
                @click="QuestionsPublishState(row)"
              >{{ row.publishState === 0 ? "上架" : "下架" }}</el-button>
              <el-button
                type="text"
                size="small"
                @click="deleteQuestions(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            background
            layout="total,sizes,prev, pager, next,jumper"
            :total="page.total"
            page-size="5"
            :page-sizes="[5, 10, 20, 30]"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
    </div>

    <!--  放置弹层 -->
    <preview
      ref="preview"
      :show-dialog="showDialog"
      :item-id="itemId"
      @closeDialog="closeDialog"
    />
    <!-- 审核弹层 -->
    <el-dialog title="题目审核" :visible.sync="show" width="25%">
      <el-form :model="form">
        <el-form-item>
          <el-radio v-model="form.chkState" label="1">通过</el-radio>
          <el-radio v-model="form.chkState" label="2">拒绝</el-radio>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.chkRemarks"
            type="textarea"
            :rows="3"
            placeholder="请输入审核意见"
            resize="none"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="determine()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {
  getChoiceQuestions,
  deleteQuestions,
  checkQuestions,
  QuestionsPublishState
} from '@/api/questions'
import { formatDate } from '@/filters'
import serachText from '../components/serachText.vue'
import Preview from '../components/preview.vue'
export default {

  name: 'WorkspaceJsonIndex',
  components: { serachText, Preview },

  data() {
    return {
      searchParams: {},

      loading: false,
      list: [], // 接数据的
      page: {
        page: 1, // 当前页码

        pagesize: 5,
        total: 0 // 总数
      },
      showDialog: false, // 显示窗体
      show: false,
      form: {
        chkState: '',
        id: '',
        chkRemarks: ''
      },
      State: null,
      activeName: 'all' // tab栏默认选择
    }
  },

  mounted() {},
  created() {
    this.getChoiceQuestions()
  },

  methods: {
    async getChoiceQuestions() {
      const query = {
        chkState: this.State
      }
      const { data } = await getChoiceQuestions(query)
      console.log(data)
      this.list = data.items
      this.page.total = data.counts

      console.log(this.list)
    },
    changePage(newPage) {
      this.page.page = newPage
      this.getChoiceQuestions()
    },

    // 预览-弹窗
    async showPreview(id) {
      this.itemId = id
      console.log('点击了')
      await this.$refs.preview.getQuestionsById(id)
      this.showDialog = true // 显示弹层
    },
    closeDialog() {
      this.showDialog = false
    },
    // 删除
    async deleteQuestions(id) {
      try {
        await this.$confirm('此操作将永久删除该题目, 是否继续?')
        await deleteQuestions(id)
        if (this.list.length === 1 && this.page.page !== 1) {
          this.page.page--
        }
        this.getChoiceQuestions()
        this.$message.success('删除成功')
      } catch (err) {
        console.log(err)
      }
    },
    async changePage(curPage) {
      console.log('curPage', curPage)
      const params = { ...this.searchParams, ...this.page, page: curPage }
      const { data } = await getChoiceQuestions(params)
      this.list = data.items
      this.page.total = data.counts
    },
    // 审核弹窗
    check(id) {
      this.form.id = id
      this.show = true
    },

    // 审核方法
    async determine() {
      console.log('点击了')
      if (this.form.chkState === '' || this.form.chkRemarks === '') {
        return this.$message.warning('必须输入审核意见')
      }
      this.show = false
      const id = this.form.id
      try {
        const data = {
          id,
          chkState: Number(this.form.chkState),
          chkRemarks: this.form.chkRemarks
        }
        const res = await checkQuestions(data)
        console.log('提交审核意见', res)
        this.$message.success('操作成功')
        this.getChoiceQuestions()
      } catch (err) {
        console.log(err)
      }
    },

    TabChange(tab, event) {
      console.log(tab, event)
      if (this.activeName === 'all') {
        this.State = null
        console.log('hhh')
        this.getChoiceQuestions()
      } else {
        this.State = Number(this.activeName)
        this.page.page = 1
        this.getChoiceQuestions()
      }
    },
    QuestionsPublishState(data) {
      this.$confirm(
        `您确定${data.publishState === 0 ? '上架' : '下架'}这道题目吗？`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(async() => {
        try {
          if (data.chkState === 1) {
            await QuestionsPublishState({
              id: data.id,
              publishState: data.publishState === 0 ? 1 : 0
            })
            this.getChoiceQuestions()
            this.$message.success(
              `${data.publishState === 0 ? '上架' : '下架'}成功`
            )
          } else {
            this.$message.warning('请先通过审核')
          }
        } catch (err) {
          console.log(err)
          this.$message.error('操作失败')
        }
      })
    },
    async handleSearch(v) {
      console.log('v', v)
      const params = { ...v, ...this.page }
      this.searchParams = v
      const { data } = await getChoiceQuestions(params)
      this.list = data.items
      this.page.total = data.counts
    }
  }
}
</script>

<style lang="scss" scoped>
.ReviewStatus {
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  padding: 6px 8px;
  line-height: 100px;
}
.wait {
  background-color: #fdf6ec;
  border-color: #faecd8;
  color: #e6a23c;
}
.refuse {
  background-color: #fef0f0;
  border-color: #fde2e2;
  color: #f56c6c;
}
.pass {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}

::v-deep .el-dialog {
  border-radius: 10px;
  overflow: hidden;
  .el-dialog__header {
    background-color: #409eff;
    .el-dialog__title {
      color: #fff;
    }
    .el-icon-close:before {
      color: #fff;
    }
  }
}
</style>
